<template>
  <div>
    <el-card shadow="hover" class="card" :style="styleObject">
      <i :class="icon" class="text" 
        ><span>{{ title }}</span></i
      ><br />
      <span class="data">{{ data }}</span>
    </el-card>
  </div>
</template>
<script>
export default {
  name:"infomation_card",
  props: {
    icon: {
      type: String,
    },
    title: {
      type: String,
      required: true,
    },
    data: {
      type: String,
      required: true,
    },
    startColor: {
      type: String,
      default: "#9fa5d5",
    },
    endColor: {
      type: String,
      default: "#e8f5c8",
    },
  },
  computed: {
    styleObject() {
      return {
        background: `-moz-linear-gradient(left, ${this.startColor}, ${this.endColor})`,
        background: `-webkit-linear-gradient(left,${this.startColor}, ${this.endColor})`,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  width: 100%;
  height: 100%;
  //position: relative;
  //border: 1px solid red;
  border-radius: 15px;
  .text {
    font-family: 微软雅黑;
    font-size: 1.1em;
    color: #fff;
  }
  .data {
    font-size: 1.5em;
    line-height: 1.6em;
    color: #fff;
  }
}
</style>
